<!DOCTYPE html>
<html>
	<head>
		<title>智能科学与技术岗位分析</title>
    <style>
      *{
        color: white;
      }
    </style >
    <script src="../static/js/echarts.min.js"></script>
	</head>
	<body style="background-image: url('../static/bgimg.png'); background-size: 100% 100%; background-repeat:no-repeat;background-position:center;background-attachment:fixed;">
    <h1 style="text-align:center">智能科学与技术十三种岗位数据分析</h1>
    <div>
      <div id="Proportion" style="width: 32%;height: 470px;margin-top: 100px;display:inline-block;margin-left:17%;"></div>
      <div id="avg_monthlyPay" style="width: 49%; height: 470px;margin-top: 100px;display:inline-block;"></div>
    </div>
    <div style="text-align: center;">
      <a href="/map" style="text-align: center;">智能科学与技术岗位全国分布情况</a>
    </div>
    <div>
      <a href="/index" style="margin-left:30px; font-size:20px;text-decoration:none;"><首页</a>
    </div>
	</body>
  <script>
    window.onload=function(){
      var url = window.location.href
      var xhr = new XMLHttpRequest()
      xhr.open("get", url+"Data")
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var msg = JSON.parse(xhr.responseText);

          var pro = []
          var avg_name = []
          var avg_data = []
          var med = []

          for(let i=0;i<msg.length;i++){
            var pro_item = {
              value: msg[i].Proportion,
              name: msg[i].name
            }
            avg_name.push(msg[i].name)
            avg_data.push(msg[i].avg_monthlyPay)
            med.push(msg[i].med_monthlyPay)
            pro.push(pro_item)
          }

          var Proportion = echarts.init(document.getElementById('Proportion'));
          option = {
            title: {
              text: '岗位占比',
              subtext: '图例',
              left: 'center',
              textStyle:{
			          color:"#fff"
		          }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              textStyle:{
		          	color:"#fff"
		          }
            },
            series: [
              {
              name: '占比',
              type: 'pie',
              radius: '50%',
              data: pro,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
              }
            ]
          };
          Proportion.setOption(option);

          var avg_monthlyPay = echarts.init(document.getElementById('avg_monthlyPay'));
          option = {
            title: {
              text: '薪资情况',
              textStyle:{
			          color:"#fff"
		          }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              textStyle:{
			          color:"#fff"
		          }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
              textStyle:{
			          color:"#fff"
		          }
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              textStyle:{
			          color:"#fff"
		          }
            },
            yAxis: {
              type: 'category',
              data: avg_name,
              textStyle:{
			          color:"#fff"
		          }
            },
            series: [
              {
                name: '月薪平均值',
                type: 'bar',
                data: avg_data,
                textStyle:{
			            color:"#fff"
		            }
              },
              {
                name: '月薪中位数',
                type: 'bar',
                data: med,
                textStyle:{
			            color:"#fff"
		            }
              }
            ]
          }
          avg_monthlyPay.setOption(option);
        }
      };
    }

</script>
</html>
